www.gusucode.com > 集团企业网站模板 html5生态企业类网站源码源码程序 > 集团企业网站模板 html5生态企业类网站源码源码程序/www1/style/css/banner.css
/* www.adminbuy.cn 做最好的织梦模板 */ .left { float: left; _display: inline; } .right { float: right; _display: inline; } .center { margin-left: auto; margin-right: auto; display: block; } .hidden { display: none; animation: none !important; } .novis { visibility: hidden; } .bold { font-weight: bold; } .italic { font-style: italic; } .underline { text-decoration: underline; } .align-center { text-align: center; } .align-right { text-align: right; } .wrap { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; -o-text-overflow: ellipsis; word-break: normal; word-wrap: normal; } @-webkit-keyframes slidein { 0% { -webkit-transform: translateX(300px); -moz-transform: translateX(300px); -ms-transform: translateX(300px); transform: translateX(300px); opacity: 0; } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; } } @-o-keyframes slidein { 0% { -webkit-transform: translateX(300px); -moz-transform: translateX(300px); -ms-transform: translateX(300px); transform: translateX(300px); opacity: 0; } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes slidein { 0% { -webkit-transform: translateX(300px); -moz-transform: translateX(300px); -ms-transform: translateX(300px); transform: translateX(300px); opacity: 0; } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; } } .slidein 0% { -webkit-transform: translateX(300px); -moz-transform: translateX(300px); -ms-transform: translateX(300px); transform: translateX(300px); opacity: 0; } .slidein 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; } @-webkit-keyframes slideout { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; } 100% { -webkit-transform: translateX(-300px); -moz-transform: translateX(-300px); -ms-transform: translateX(-300px); transform: translateX(-300px); opacity: 0; } } @-o-keyframes slideout { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; } 100% { -webkit-transform: translateX(-300px); -moz-transform: translateX(-300px); -ms-transform: translateX(-300px); transform: translateX(-300px); opacity: 0; } } @keyframes slideout { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; } 100% { -webkit-transform: translateX(-300px); -moz-transform: translateX(-300px); -ms-transform: translateX(-300px); transform: translateX(-300px); opacity: 0; } } .slideout 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; } .slideout 100% { -webkit-transform: translateX(-300px); -moz-transform: translateX(-300px); -ms-transform: translateX(-300px); transform: translateX(-300px); opacity: 0; } @-webkit-keyframes slideleft { 0% { -webkit-transform: translateX(120%); -moz-transform: translateX(120%); -ms-transform: translateX(120%); transform: translateX(120%); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @-o-keyframes slideleft { 0% { -webkit-transform: translateX(120%); -moz-transform: translateX(120%); -ms-transform: translateX(120%); transform: translateX(120%); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @keyframes slideleft { 0% { -webkit-transform: translateX(120%); -moz-transform: translateX(120%); -ms-transform: translateX(120%); transform: translateX(120%); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideleft 0% { -webkit-transform: translateX(120%); -moz-transform: translateX(120%); -ms-transform: translateX(120%); transform: translateX(120%); } .slideleft 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } @-webkit-keyframes slideright { 0% { -webkit-transform: translateX(-120%); -moz-transform: translateX(-120%); -ms-transform: translateX(-120%); transform: translateX(-120%); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @-o-keyframes slideright { 0% { -webkit-transform: translateX(-120%); -moz-transform: translateX(-120%); -ms-transform: translateX(-120%); transform: translateX(-120%); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @keyframes slideright { 0% { -webkit-transform: translateX(-120%); -moz-transform: translateX(-120%); -ms-transform: translateX(-120%); transform: translateX(-120%); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideright 0% { -webkit-transform: translateX(-120%); -moz-transform: translateX(-120%); -ms-transform: translateX(-120%); transform: translateX(-120%); } .slideright 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } @-webkit-keyframes slidedown { 0% { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-o-keyframes slidedown { 0% { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @keyframes slidedown { 0% { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .slidedown 0% { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } .slidedown 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } @-webkit-keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } } .fadein 0% { opacity: 0; } .fadein 100% { opacity: 1; } @-webkit-keyframes dropin { 0% { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; } } @-o-keyframes dropin { 0% { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes dropin { 0% { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; } } .dropin 0% { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; } .dropin 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; } .fade { -webkit-transition: all 0.5s; transition: all 0.5s; } .fade.in, .fade.out { opacity: 0; } .slider .fade.out { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } .slider { height: 480px; } .slider .slider-flow { height: 480px; } .slider .slider-flow li { height: 480px; } .slider .slider-btn { margin-top: 201px; } .slider .slider-flow { background: #333; overflow: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slider .slider-flow li { position: absolute; width: 100%; overflow: hidden; background-position: center top; background-size: cover; } .slider .slider-flow .slider-area { width: 972px; } .slider .slider-flow .titlebox { float: left; height: 270px; overflow: hidden; margin-top: 192px; _margin-top: 169px; padding: 12px; background-color: #000000; background-color: rgba(0, 0, 0, 0.7); zoom: 1; background-color: transparent\9; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3000000, endColorstr=#b3000000)"; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3000000, endColorstr=#b3000000); max-width: 320px; _width: 294px; color: #FFF; } .slider .slider-flow .titlebox .sliderH1 { font-size: 18px; height: 31px; margin-top: 40px; overflow: hidden; margin-bottom: 9px; font-weight: bold; } .slider .slider-flow .titlebox .sliderH2 { font-size: 30px; height: 45px; overflow: hidden; margin-bottom: 6px; font-weight: bold; } .slider .slider-flow .titlebox .sliderH3 { font-size: 18px; margin-bottom: 6px; color: #00aeef; font-weight: bold; } .slider .slider-flow .titlebox p { font-size: 16px; line-height: 1.25; } .slider .slider-flow .on .titlebox { -webkit-animation: slidein 2s both; animation: slidein 2s both; } .slider .slider-flow .on .titlebox .sliderH1 { -webkit-animation: slidein 2s both; animation: slidein 2s both; } .slider .slider-flow .on .titlebox .sliderH2 { -webkit-animation: slidein 1s both 1s; animation: slidein 1s both 1s; } .slider .slider-flow .on .titlebox .sliderH3 { -webkit-animation: slidein 1.5s both 1s; animation: slidein 1.5s both 1s; } .slider .slider-flow .on .titlebox p { -webkit-animation: slidein 2s both 1s; animation: slidein 2s both 1s; } .slider .slider-nav { *zoom: 1; } .slider .slider-nav:before, .slider .slider-nav:after { content: " "; display: table; } .slider .slider-nav:after { clear: both; } .slider .slider-nav a { display: block; float: left; height: 6px; overflow: hidden; margin-left: -1px; *margin-left: -2px; background: #666; border-left: solid 1px #FFF; } .slider .slider-nav a.on { background: #000; } .slider .slider-btn { position: absolute; z-index: 9; width: 20px; height: 35px; opacity: 0; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; display: none\9; _display: block; background-color: rgba(0, 0, 0, 0.8); background-color: #000\9; padding: 20px 10px; } .slider:hover .slider-btn { opacity: .8; display: block\9; } .slider .slider-prev { left: 0; background-image: url("../images/slices.png"); background-repeat: no-repeat; background-position: -185px 20px; _background-image: url("../images/slices.png"); } .slider .slider-next { right: 0; background-image: url("../images/slices.png"); background-repeat: no-repeat; background-position: -223px 20px; _background-image: url("../images/slices.png"); } .slider.small { height: 254px; } .slider.small .slider-flow { height: 254px; } .slider.small .slider-flow li { height: 254px; } .slider.small .slider-btn { margin-top: 91px; } .slider.small .slider-flow .titlebox { margin-top: 74px; height: 168px; } .banner { height: 146px; background-position: center center; background-size: cover; }